import { useRequest } from 'alova/client'
import {
  Card,
  Typography,
  Skeleton,
  Row,
  Col,
  Descriptions,
  Divider,
  Radio,
  Input,
  Button,
  Space,
  Tag,
  App,
  InputNumber,
  DatePicker,
  Switch,
  Select,
  Image,
} from 'antd'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import { formatDate, isVideo } from '../uitls/common'
import { useEffect, useState, useCallback, useRef } from 'react'
import { dictsStore } from '../stores'
import dayjs, { Dayjs } from 'dayjs'
import { PlusOutlined } from '@ant-design/icons'
import type { UploadFile, UploadProps } from 'antd/es/upload/interface'
import TencentCOSUpload, {
  TencentCOSUploadRef,
} from '../components/TencentCOSUpload'
import { ContractTemplate, ProductInfo } from '../api/globals'

// 订单详情页面，会通过路由传入参数
// 参数包括：
// 订单id, 当前操作act: 'audit' | 'csv' | 'rsv | 'rins'

const OrderDetail = () => {
  const { id } = useParams()
  const [searchParams] = useSearchParams()
  const act = searchParams.get('act')
  const [auditOpinion, setAuditOpinion] = useState('')
  const [passFlag, setPassFlag] = useState(true)
  const { message } = App.useApp()
  const surveyUploadRef = useRef<TencentCOSUploadRef>(null)
  const siteUploadRef = useRef<TencentCOSUploadRef>(null)
  const navigate = useNavigate()

  const {
    data,
    loading,
    send: fetchDetail,
    error,
  } = useRequest(
    () =>
      Apis.apply.Detail({
        params: {
          id: Number(id),
        },
      }),
    {
      immediate: true,
    }
  )

  const { data: productList, send: fetchProductList } = useRequest(
    () => Apis.cm.Product({}),
    {
      immediate: false,
    }
  )

  const { data: contractList, send: fetchContractList } = useRequest(
    () => Apis.cm.Contract({}),
    {
      immediate: false,
    }
  )

  useEffect(() => {
    if (data?.surveyResult) {
      fetchProductList()
      fetchContractList()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data?.surveyResult])

  // 订单状态映射

  // 提交审核
  const handleSubmitAudit = () => {
    if (!auditOpinion) {
      return message.warning('请填写审核意见')
    }

    // 实际调用接口
    Apis.apply
      .Audit({
        data: {
          id: Number(id),
          passFlag,
          auditOpinion,
        },
      })
      .then(() => {
        message.success('审核成功')
        fetchDetail()
      })
      .catch((err) => {
        console.log('err', err)
        message.error('审核失败')
      })
  }

  const [csvForm, setCsvForm] = useState({
    id: Number(id),
    surveyPeople: '',
    surveyPhone: '',
    surveyTime: dayjs(Date.now()),
    addressCorrect: false,
    correctRealAddress: '',
  })

  const handleSubmitCsv = () => {
    if (!csvForm.surveyPeople || !csvForm.surveyPhone || !csvForm.surveyTime) {
      return message.warning('请填写完整信息')
    }

    if (csvForm.surveyTime) {
      csvForm.surveyTime = dayjs(csvForm.surveyTime * 1000).unix()
    }

    Apis.apply
      .NewSurvey({
        data: csvForm,
      })
      .then(() => {
        message.success('提交成功')
        fetchDetail()
      })
      .catch((err) => {
        console.log('err', err)
        message.error('提交失败')
      })
  }

  const [rsvForm, setRsvForm] = useState({
    id: Number(id),
    surveyResult: false,
    content: '',
    installTime: dayjs(Date.now()),
    installPeople: '',
    installPhone: '',
    noticeCustomer: false,
  })

  const handleSubmitRsv = () => {
    if (
      !rsvForm.surveyResult ||
      !rsvForm.content ||
      !rsvForm.installTime ||
      !rsvForm.installPeople ||
      !rsvForm.installPhone
    ) {
      return message.warning('请填写完整信息')
    }

    const surveyFiles = surveyUploadRef.current
      ?.getUploadedFiles()
      .map((f) => {
        return f.url
      })
      .filter((u) => u !== undefined)
      .map((u) => {
        // 截断host部分，只保留后半段
        const url = new URL(u)
        return url.pathname
      })

    const copyRsvForm = {
      ...rsvForm,
      installTime: undefined as number | undefined,
      surveyImgUrl: surveyFiles,
    }

    if (rsvForm.installTime) {
      copyRsvForm.installTime = (rsvForm.installTime as Dayjs).valueOf()
    }

    Apis.apply
      .SurveyComplete({
        data: copyRsvForm,
      })
      .then(() => {
        message.success('提交成功')
        fetchDetail()
      })
      .catch((err) => {
        console.log('err', err)
        message.error('提交失败')
      })
  }

  const [rinsForm, setRinsForm] = useState({
    id: Number(id),
    productId: undefined,
    installImgUrl: [],
    contractId: 0,
    contractUrl: '',
    startTime: dayjs(Date.now()),
    endTime: dayjs(Date.now()),
    commissionName: '',
    commissionIdcard: '',
    telephone: '',
    email: '',
    waterHostCode: '',
    remark: '',
    productPrice: '',
    payPrice: '',
    contractCode: '',
  })

  const [selectedContract, setSelectedContract] = useState<
    ContractTemplate | undefined
  >()

  const contractUploadRef = useRef<TencentCOSUploadRef>(null)

  const handleSubmitRins = () => {
    if (!rinsForm.startTime || !rinsForm.endTime) {
      return message.warning('请填写完整信息')
    }

    const installFiles = siteUploadRef.current
      ?.getUploadedFiles()
      .map((f) => {
        return f.url
      })
      .filter((u) => u !== undefined)
      .map((u) => {
        const url = new URL(u)
        return url.pathname
      })

    const copyRinsForm = {
      ...rinsForm,
      startTime: undefined as number | undefined,
      endTime: undefined as number | undefined,
      installImgUrl: installFiles,
    }

    if (rinsForm.startTime) {
      copyRinsForm.startTime = (rinsForm.startTime as Dayjs).valueOf()
    }
    if (rinsForm.endTime) {
      copyRinsForm.endTime = (rinsForm.endTime as Dayjs).valueOf()
    }

    // 上传完成的合同url
    if (!contractUploadRef.current?.getUploadedFiles()[0]?.url) {
      return message.warning('请上传合同')
    }
    rinsForm.contractUrl = new URL(
      contractUploadRef.current.getUploadedFiles()[0].url!
    ).pathname

    Apis.apply
      .InstallComplete({
        data: copyRinsForm,
      })
      .then(() => {
        message.success('提交成功')
        fetchDetail()
      })
      .catch((err) => {
        console.log('err', err)
        message.error('提交失败')
      })
  }

  return (
    <div className="h-full flex flex-col px-12 py-4">
      <Card className="mb-4">
        <div className="flex flex-col relative justify-center items-center">
          <Typography.Title level={4}>订单详情</Typography.Title>
          {loading || !error ? (
            <Button
              className="!absolute right-4 top-[50%] translate-y-[-100%]"
              type="primary"
              onClick={() => navigate(-1)}
            >
              返回
            </Button>
          ) : null}
        </div>
        {loading ? (
          <Skeleton className="w-full" active paragraph={{ rows: 10 }} />
        ) : error ? (
          <div className="flex flex-col items-center w-full">
            <Typography.Title level={3} className="!text-red-400">
              详情加载失败
            </Typography.Title>
            <span>{error.msg}</span>
            <Button type="primary" onClick={() => navigate(-1)}>
              返回
            </Button>
          </div>
        ) : (
          <div>
            <Descriptions bordered>
              <Descriptions.Item label="订单号" span={3}>
                {data?.id}
              </Descriptions.Item>
              <Descriptions.Item label="订单状态" span={3}>
                {data?.status !== undefined && (
                  <Tag
                    color={
                      dictsStore.getDictColor('serviceStatus', data.status) ||
                      'default'
                    }
                  >
                    {dictsStore.getDictKey('serviceStatus', data.status) ||
                      '未知状态'}
                  </Tag>
                )}
              </Descriptions.Item>
              <Descriptions.Item label="下单时间" span={3}>
                {data?.createdTime ? formatDate(data.createdTime) : ''}
              </Descriptions.Item>
            </Descriptions>

            <Divider />

            <Typography.Title level={5}>用户信息</Typography.Title>
            <Descriptions bordered>
              <Descriptions.Item label="姓名" span={1}>
                {data?.name}
              </Descriptions.Item>
              <Descriptions.Item label="身份证号" span={2}>
                {data?.idcard}
              </Descriptions.Item>
              <Descriptions.Item label="手机号" span={1}>
                {data?.phone}
              </Descriptions.Item>
              <Descriptions.Item label="选填地址" span={2}>
                {data?.address}
              </Descriptions.Item>
              <Descriptions.Item label="详细地址" span={3}>
                {data?.surveyTask?.correctRealAddress || data?.address}
              </Descriptions.Item>
            </Descriptions>

            <Divider />

            {data?.status === 1 && act === 'audit' && (
              <>
                <Typography.Title level={5}>审核信息</Typography.Title>
                <Row gutter={[16, 16]}>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2">是否通过：</div>
                      <Radio.Group
                        value={passFlag}
                        onChange={(e) => setPassFlag(e.target.value)}
                      >
                        <Radio value={true}>通过</Radio>
                        <Radio value={false}>驳回</Radio>
                      </Radio.Group>
                    </div>
                  </Col>
                  <Col span={24}>
                    <div className="mb-2">审核意见：</div>
                    <Input.TextArea
                      rows={4}
                      placeholder="请输入审核意见"
                      value={auditOpinion}
                      onChange={(e) => setAuditOpinion(e.target.value)}
                    />
                  </Col>
                  <Col span={24} className="flex justify-center mt-4">
                    <Space>
                      <Button type="primary" onClick={handleSubmitAudit}>
                        提交
                      </Button>
                      <Button onClick={() => navigate(-1)}>取消</Button>
                    </Space>
                  </Col>
                </Row>
              </>
            )}

            {/* {(data.status === 2 || data.status === 3) && ( */}
            {data?.status && data.status > 2 && (
              // 审核通过, 展示详情
              <>
                <Typography.Title level={5}>审核信息</Typography.Title>
                <Descriptions bordered>
                  <Descriptions.Item
                    styles={{ label: { width: '20%' } }}
                    label="审核状态"
                    span={3}
                  >
                    {data.passFlag ? (
                      <Tag color="success">通过</Tag>
                    ) : (
                      <Tag color="error">驳回</Tag>
                    )}
                  </Descriptions.Item>
                  <Descriptions.Item
                    styles={{ label: { width: '20%' } }}
                    label="审核意见"
                    span={3}
                  >
                    {data?.auditOpinion}
                  </Descriptions.Item>
                </Descriptions>
                <Divider />
              </>
            )}
            <Divider />

            {data.status === 2 && data.surveyTask === null && act === 'csv' && (
              // 创建勘探任务填报内容, 展示勘探任务表单
              <>
                <Typography.Title level={5}>勘探任务</Typography.Title>
                <Row gutter={[24, 12]}>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">勘探人员：</div>
                      <Input
                        value={csvForm.surveyPeople}
                        onChange={(e) =>
                          setCsvForm({
                            ...csvForm,
                            surveyPeople: e.target.value,
                          })
                        }
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        勘探人员手机号：
                      </div>
                      <Input
                        type="number"
                        value={csvForm.surveyPhone}
                        onChange={(e) =>
                          setCsvForm({
                            ...csvForm,
                            surveyPhone: e.target.value,
                          })
                        }
                      />
                    </div>
                  </Col>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">勘探日期：</div>
                      <DatePicker
                        showTime
                        className="grow"
                        value={csvForm.surveyTime}
                        onChange={(date) => {
                          setCsvForm({
                            ...csvForm,
                            surveyTime: date,
                          })
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        地址是否正确：
                      </div>
                      <Switch
                        checked={csvForm.addressCorrect}
                        onChange={(checked) =>
                          setCsvForm({ ...csvForm, addressCorrect: checked })
                        }
                      />
                    </div>
                  </Col>
                  {!csvForm.addressCorrect && (
                    <Col span={24}>
                      <div className="flex items-center">
                        <div className="mr-2 shrink-0 w-[120px]">
                          核实后地址：
                        </div>
                        <Input.TextArea
                          rows={4}
                          placeholder="请输入核实后地址"
                          value={csvForm.correctRealAddress}
                          onChange={(e) =>
                            setCsvForm({
                              ...csvForm,
                              correctRealAddress: e.target.value,
                            })
                          }
                        />
                      </div>
                    </Col>
                  )}
                  <Col span={24} className="flex justify-center mt-4">
                    <Space>
                      <Button type="primary" onClick={handleSubmitCsv}>
                        提交
                      </Button>
                      <Button onClick={() => navigate(-1)}>取消</Button>
                    </Space>
                  </Col>
                </Row>
              </>
            )}

            {data?.status && data.status >= 4 && data?.surveyTask && (
              <>
                <Typography.Title level={5}>勘察任务</Typography.Title>
                <Descriptions bordered>
                  <Descriptions.Item label="勘察人员" span={1}>
                    {data.surveyTask.surveyPeople}
                  </Descriptions.Item>
                  <Descriptions.Item label="勘察人员电话" span={2}>
                    {data.surveyTask.surveyPhone}
                  </Descriptions.Item>
                  <Descriptions.Item label="勘察时间" span={3}>
                    {data.surveyTask.surveyTime
                      ? formatDate(data.surveyTask.surveyTime)
                      : ''}
                  </Descriptions.Item>
                  <Descriptions.Item label="地址是否正确" span={3}>
                    {data.surveyTask.addressCorrect ? '是' : '否'}
                  </Descriptions.Item>
                  {!data.surveyTask.addressCorrect && (
                    <Descriptions.Item label="核实后地址" span={3}>
                      {data.surveyTask.correctRealAddress}
                    </Descriptions.Item>
                  )}
                </Descriptions>
                <Divider />
              </>
            )}

            {data.status === 4 && data.surveyTask && act === 'rsv' && (
              // 创建勘探任务填报内容, 展示勘探任务表单
              <>
                <Typography.Title level={5}>勘探结果</Typography.Title>
                <Row gutter={[24, 12]}>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">勘探结果：</div>
                      <Radio.Group
                        value={rsvForm.surveyResult}
                        onChange={(e) =>
                          setRsvForm({
                            ...rsvForm,
                            surveyResult: e.target.value,
                          })
                        }
                      >
                        <Radio value={true}>可以施工</Radio>
                        <Radio value={false}>条件不允许</Radio>
                      </Radio.Group>
                    </div>
                  </Col>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        勘察照片及视频：
                      </div>
                      {/* <Upload {...surveyUploadProps}>
                        <div>
                          <PlusOutlined />
                          <div style={{ marginTop: 8 }}>上传</div>
                        </div>
                      </Upload> */}
                      <TencentCOSUpload ref={surveyUploadRef} maxCount={9} />
                    </div>
                  </Col>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        勘探结果说明：
                      </div>
                      <Input.TextArea
                        rows={4}
                        placeholder="请输入勘探结果说明"
                        value={rsvForm.content}
                        onChange={(e) =>
                          setRsvForm({
                            ...rsvForm,
                            content: e.target.value,
                          })
                        }
                      />
                    </div>
                  </Col>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        上门安装时间：
                      </div>
                      <DatePicker
                        showTime
                        className="grow"
                        value={rsvForm.installTime}
                        onChange={(date) => {
                          setRsvForm({ ...rsvForm, installTime: date })
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">安装人员：</div>
                      <Input
                        value={rsvForm.installPeople}
                        onChange={(e) =>
                          setRsvForm({
                            ...rsvForm,
                            installPeople: e.target.value,
                          })
                        }
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        安装人员手机号：
                      </div>
                      <Input
                        type="number"
                        value={rsvForm.installPhone}
                        onChange={(e) =>
                          setRsvForm({
                            ...rsvForm,
                            installPhone: e.target.value,
                          })
                        }
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        是否通知用户：
                      </div>
                      <Radio.Group
                        value={rsvForm.noticeCustomer}
                        onChange={(e) =>
                          setRsvForm({
                            ...rsvForm,
                            noticeCustomer: e.target.value,
                          })
                        }
                      >
                        <Radio value={true}>是</Radio>
                        <Radio value={false}>否</Radio>
                      </Radio.Group>
                    </div>
                  </Col>
                  <Col span={24} className="flex justify-center mt-4">
                    <Space>
                      <Button type="primary" onClick={handleSubmitRsv}>
                        提交
                      </Button>
                      <Button onClick={() => navigate(-1)}>取消</Button>
                    </Space>
                  </Col>
                </Row>
              </>
            )}

            {data?.status && data.status >= 5 && data?.surveyResult && (
              <>
                <Divider />
                <Typography.Title level={5}>勘察结果</Typography.Title>
                <Descriptions bordered>
                  <Descriptions.Item label="勘察结果" span={3}>
                    {data.surveyResult.surveyResult ? '可以施工' : '条件不允许'}
                  </Descriptions.Item>
                  <Descriptions.Item label="结果说明" span={3}>
                    {data.surveyResult.content}
                  </Descriptions.Item>
                  <Descriptions.Item label="勘察照片及视频" span={3}>
                    {data.surveyResult.surveyImgUrl?.map((u) => (
                      <div className="w-[180px] h-[140px] p-[10px] rounded-md overflow-hidden border border-gray-200 inline-block">
                        {isVideo(u) ? (
                          <video
                            controls
                            autoPlay
                            style={{ width: '160px', height: '120px' }}
                          >
                            <source src={u} type="video/mp4" />
                            您的浏览器不支持视频播放
                          </video>
                        ) : (
                          <Image width={120} height={120} src={u} />
                        )}
                      </div>
                    ))}
                  </Descriptions.Item>
                  <Descriptions.Item label="安装日期" span={1}>
                    {data.surveyResult.installTime
                      ? formatDate(data.surveyResult.installTime)
                      : ''}
                  </Descriptions.Item>
                  <Descriptions.Item label="安装人员" span={1}>
                    {data.surveyResult.installPeople}
                  </Descriptions.Item>
                  <Descriptions.Item label="安装人员电话" span={1}>
                    {data.surveyResult.installPhone}
                  </Descriptions.Item>
                  <Descriptions.Item label="是否通知用户" span={3}>
                    {data.surveyResult.noticeCustomer ? '是' : '否'}
                  </Descriptions.Item>
                </Descriptions>
              </>
            )}

            {data.status === 5 && data.surveyResult && act === 'rins' && (
              <>
                <Divider />
                <Typography.Title level={5}>安装结果</Typography.Title>
                <Row gutter={[24, 12]}>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        现场照片及视频：
                      </div>
                      <TencentCOSUpload ref={siteUploadRef} maxCount={9} />
                    </div>
                  </Col>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">合同模板：</div>
                      <Select
                        className="grow !mr-2"
                        options={contractList}
                        value={rinsForm.productId}
                        fieldNames={{
                          label: 'name',
                          value: 'id',
                        }}
                        onChange={(value, option) => {
                          setRinsForm({
                            ...rinsForm,
                            contractId: value!,
                          })
                          setSelectedContract(option as ContractTemplate)
                        }}
                      >
                        {contractList?.map((item) => (
                          <Select.Option value={item.id}>
                            {item.name}
                          </Select.Option>
                        ))}
                      </Select>
                      <Button
                        type="primary"
                        disabled={!selectedContract}
                        onClick={() => {
                          if (selectedContract) {
                            window.open(selectedContract.templateUrl)
                          }
                        }}
                      >
                        下载合同模板
                      </Button>
                    </div>
                  </Col>
                  <Col span={24}>
                    {/* 上传合同 */}
                    <TencentCOSUpload
                      ref={contractUploadRef}
                      maxCount={1}
                      isContract={true}
                    />
                  </Col>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">合同编号：</div>
                      <Input
                        placeholder="请输入合同编号"
                        value={rinsForm.contractCode}
                        onChange={(e) =>
                          setRinsForm({
                            ...rinsForm,
                            contractCode: e.target.value,
                          })
                        }
                      />
                    </div>
                  </Col>
                  <Col span={24}>
                    <Typography.Title level={5}>用户信息补充</Typography.Title>
                  </Col>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">用户产品：</div>
                      <Select
                        className="grow"
                        options={productList}
                        value={rinsForm.productId}
                        fieldNames={{
                          label: 'name',
                          value: 'id',
                        }}
                        onChange={(value, option) => {
                          setRinsForm({
                            ...rinsForm,
                            productId: value,
                            productPrice:
                              (option as ProductInfo).price ?? '---',
                          })
                        }}
                      ></Select>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        产品生效时间：
                      </div>
                      <DatePicker
                        className="grow"
                        value={rinsForm.startTime}
                        onChange={(date) => {
                          setRinsForm({ ...rinsForm, startTime: date })
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        产品失效时间：
                      </div>
                      <DatePicker
                        className="grow"
                        value={rinsForm.endTime}
                        onChange={(date) => {
                          setRinsForm({ ...rinsForm, endTime: date })
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">产品价格：</div>
                      <Typography.Text color="red">
                        ¥{rinsForm.productPrice}
                      </Typography.Text>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">实付价格：</div>
                      <InputNumber
                        prefix="¥"
                        className="grow"
                        value={rinsForm.payPrice}
                        onChange={(value) => {
                          if (value) {
                            setRinsForm({ ...rinsForm, payPrice: value })
                          }
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        被委托人姓名：
                      </div>
                      <Input
                        value={rinsForm.commissionName}
                        onChange={(e) => {
                          setRinsForm({
                            ...rinsForm,
                            commissionName: e.target.value,
                          })
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        被委托人证件号：
                      </div>
                      <Input
                        value={rinsForm.commissionIdcard}
                        onChange={(e) => {
                          setRinsForm({
                            ...rinsForm,
                            commissionIdcard: e.target.value,
                          })
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">固定电话：</div>
                      <Input
                        value={rinsForm.telephone}
                        onChange={(e) => {
                          setRinsForm({
                            ...rinsForm,
                            telephone: e.target.value,
                          })
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">电子邮箱：</div>
                      <Input
                        value={rinsForm.email}
                        onChange={(e) => {
                          setRinsForm({ ...rinsForm, email: e.target.value })
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">
                        自来水户号：
                      </div>
                      <Input
                        value={rinsForm.waterHostCode}
                        onChange={(e) => {
                          setRinsForm({
                            ...rinsForm,
                            waterHostCode: e.target.value,
                          })
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={24}>
                    <div className="flex items-center">
                      <div className="mr-2 shrink-0 w-[120px]">备注：</div>
                      <Input.TextArea
                        rows={4}
                        value={rinsForm.remark}
                        onChange={(e) => {
                          setRinsForm({ ...rinsForm, remark: e.target.value })
                        }}
                      />
                    </div>
                  </Col>
                  <Col span={24} className="flex justify-center mt-4">
                    <Space>
                      <Button type="primary" onClick={handleSubmitRins}>
                        提交
                      </Button>
                      <Button onClick={() => navigate(-1)}>取消</Button>
                    </Space>
                  </Col>
                </Row>
              </>
            )}

            {data?.status && data.status >= 6 && data?.installResult && (
              <>
                <Divider />
                <Typography.Title level={5}>安装结果</Typography.Title>
                <Descriptions bordered>
                  <Descriptions.Item label="安装状态" span={3}>
                    {data.installResult.installFlag ? '已安装' : '未安装'}
                  </Descriptions.Item>
                  <Descriptions.Item label="产品名称" span={1}>
                    {data.installResult.productName}
                  </Descriptions.Item>
                  <Descriptions.Item label="产品价格" span={1}>
                    {data.installResult.productPrice}
                  </Descriptions.Item>
                  <Descriptions.Item label="实付价格" span={1}>
                    {data.installResult.payPrice}
                  </Descriptions.Item>
                  <Descriptions.Item label="安装照片及视频" span={3}>
                    {data.installResult.installImgUrl?.map((u) => (
                      // 根据地址扩展名判断是video还是image，渲染不同的组件
                      <div className="w-[140px] h-[140px] p-[10px] rounded-md overflow-hidden border border-gray-200 inline-block">
                        {isVideo(u) ? (
                          // <video className="!w-[120px] !h-[120px]" src={u} />
                          <video
                            controls
                            autoPlay
                            style={{ width: '120px', height: '120px' }}
                          >
                            <source src={u} type="video/*" />
                            您的浏览器不支持视频播放
                          </video>
                        ) : (
                          <Image width={120} height={120} src={u} />
                        )}
                      </div>
                    ))}
                  </Descriptions.Item>
                  <Descriptions.Item label="生效时间" span={1}>
                    {data.installResult.startTime
                      ? formatDate(data.installResult.startTime)
                      : ''}
                  </Descriptions.Item>
                  <Descriptions.Item label="失效时间" span={2}>
                    {data.installResult.endTime
                      ? formatDate(data.installResult.endTime)
                      : ''}
                  </Descriptions.Item>
                  <Descriptions.Item label="被委托人姓名" span={1}>
                    {data.installResult.commissionName}
                  </Descriptions.Item>
                  <Descriptions.Item label="被委托人身份证号" span={2}>
                    {data.installResult.commissionIdcard}
                  </Descriptions.Item>
                  <Descriptions.Item label="固定电话" span={1}>
                    {data.installResult.telephone}
                  </Descriptions.Item>
                  <Descriptions.Item label="电子邮箱" span={1}>
                    {data.installResult.email}
                  </Descriptions.Item>
                  <Descriptions.Item label="自来水户号" span={1}>
                    {data.installResult.waterHostCode}
                  </Descriptions.Item>
                  <Descriptions.Item label="备注" span={3}>
                    {data.installResult.remark}
                  </Descriptions.Item>
                </Descriptions>
              </>
            )}
          </div>
        )}
      </Card>
    </div>
  )
}

export default OrderDetail
